

@function breakpoint-next($name,$breakpoints: $grid-breakpoints,$breakpoint-names: map-keys($breakpoints)) {
    $n: index($breakpoint-names , $name);
    @debug $n; // index() 第一个参数为list  ，第二个参数为其中的一个元素值，返回的是值索引，从下标1开始
    // map-keys() 参数为map集合，返回值为list ：以$breakpoint-names为例，返回值为： xs, sm, md, lg, xl
    @debug $breakpoint-names;// @debug 指令用来调试
    @debug length($breakpoint-names); // length() 用来测量list的长度 此处返回的值为5 
    @return if($n != null and $n < length($breakpoint-names),nth($breakpoint-names,$n + 1), null);
    // scss 内置 if 函数 第一个参数为表达式，第二个为表达式正确的取值，第三个为表达式不满足的取值
    // nth函数第一个参数为list，第二个参数为list中的第几个元素 ,返回值是list中指定下标对应的元素值
}

@function breakpoint-min($name,$breakpoints: $grid-breakpoints){
    $min: map-get($breakpoints ,$name);
    // map-get()第一个参数为map集合，第二个参数为键key的名称，返回的是map集合中键对应的值
    @return if($min != 0, $min, null);
}
@function breakpoint-max($name,$breakpoints:$grid-breakpoins){
   $next: breakpoint-next($name, $breakpoints);
   @return if($next, breakpoint-min($next,$breakpoints) - 0.02, null);
}
@function breakpoint-infix($name,$breakpoints:$grid-breakpoins){
    @return if(breakpoint-min($name,$breakpoints) == null, "", "-#{$name}");
}

@mixin media-breakpoint-up($name,$breakpoints:$grid-breakpoints){
    $min:breakpoint-min($name,$breakpoints );
    @if $min {
        @media (min-width:$min) {
            @content;
        }
    } @else {
      @content;
    }
}
@mixin  media-breakpoint-down($name,$breakpoints:$grid-breakpoints){
   $max:breakpoint-max($name,$breakpoints);
   @if $max {
       @media (max-width:$max) {    
           @content;
        //    @content 主要作用是用来传递内容到Mixin里面
       }
   } @else{
       @content;
   }
}

@mixin media-breakpoint-between($lower,$upper,$breakpoints:$grid-breakpoints){
  $min: breakpoint-min($lower,$breakpoints );
  $max: breakpoint-max($upper,$breakpoints );
  @if $min != null and $max != null {
    @media (min-width:$min) and (max-width:$max){
        @content;
    }
  } @else if $max == null {
      @include media-breakpoint-up($lower,$breakpoints ) {
        @content;
      }
  } @else if $min == null {
      @include media-breakpoint-down($upper,$breakpoints ) {
        @content; 
      }
  }
}

@mixin media-breakpoint-only($name,$breakpoints:$grid-breakpoints){
    $min: breakpoint-min($name, $breakpoints);
    $max: breakpoint-max($name, $breakpoints);
    @if $min != null and $max != null{
        @media (min-width:$min)  and (max-width:$max){
           @content;
        }
    } @else if $max == null {
        @include media-breakpoint-up($name,$breakpoints ) {
            @content;
        }
    } @else if $min == null {
        @include media-breakpoint-down($name,$breakpoints ) {
            @content;
        }
    }
}